<!--
 * @Author: jiejie.zhu
 * @Date: 2019-10-17 23:32:03
 * @LastEditors: jiejie.zhu
 * @LastEditTime: 2019-10-24 18:23:08
 * @Description: file content
 -->
<template>
	<div id="skill-map">

	</div>
</template>

<script>
  require("jsmind/style/jsmind.css");
  const JsMind = require('jsmind/js/jsmind');

	export default {
    name: "fe_slills",
    mounted() {
      var mind = {
        /* 元数据，定义思维导图的名称、作者、版本等信息 */
        meta:{
            name: "jsMind-demo-tree",
            author: "hizzgdev@163.com",
            version: "0.2"
        },
        /* 数据格式声明 */
        format: "node_tree",
        data: this.$page.frontmatter.mind
      };
      var options = {                   // options 将在下一章中详细介绍
        container:'skill-map',          // [必选] 容器的ID，或者为容器的对象
        editable: false,                // [可选] 是否启用编辑
        theme: 'primary',                // [可选] 主题
        view: {
          hmargin: 0,
          vmargin: 0,
          line_width: 1,
          // line_color: "blue",
        }
      };
      var jm = new JsMind(options);
      jm.show(mind);
    }
	};
</script>

<style>
	#skill-map {
    width: 100%;
    height: 1300px;
  }

  .content:not(.custom) {
    max-width: 950px;
  }

  jmnode {
    font: 12px/1.125 Verdana,Arial,Helvetica,sans-serif;
    padding: 5px;
  }
  jmnode, jmnode.selected, jmnode:hover {
    box-shadow: none;
  }
</style>
